<template>
	<view class="container">
		<view class="user-section">
			<image class="bg" src="/static/img/user/img_huiyuanka.png"></image>
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="userInfo.avatar ? userInfo.avatar : '/static/img/public/avatar.png'" @error="avatarError" @tap="toSetting"></image>
				</view>
				<view class="info-box">
					<!-- <text class="username">{{userInfo.nickname || '游客'}}</text> -->
					<view class="c01">
						<view class="d01">{{userInfo.name || '游客'}}</view>
						<view class="d02" @tap="toInviteFriends">邀请好友</view>
					</view>
					<view class="c02" v-if="userInfo.city">
						<view class="yticon icon-shouhuodizhi"></view>
						<text class="text">{{userInfo.province}}-{{userInfo.city}}</text>
					</view>
				</view>
			</view>
			<view class="tj-sction">
				<view class="tj-item" @tap="toPage('/pages/user/keep')">
					<text class="num num-font">{{userInfo.collect || '--' }}</text>
					<text class="text">收藏</text>
				</view>
				<view class="tj-item" @tap="toPage('/pages/user/cash')">
					<text class="num num-font">{{userInfo.balance || '--' }}</text>
					<text class="text">现金</text>
				</view>
				<view class="tj-item" @tap="toPage('/fortune/fortuneDetail')">
					<text class="num num-font">{{userInfo.fortune || '--' }}</text>
					<text class="text">福分</text>
				</view>
			</view>
			<view class="vip-card-box">
				<view class="card-box-left">
					<view class="tit">
						<text class="yticon icon-iLinkapp-"></text>
						<text>牧耘郎会员</text>
					</view>
					<!-- <button class="b-btn" v-if="!hasLogin || userInfo.type == 0" @tap="toMembership('/member/memberActivation')">
						<text>免费领取会员资格</text>
						<text class="yticon icon-you" style="font-size: 23upx;"></text>
					</button> -->
					<!-- <button class="b-btn" v-if="userInfo.type == 1 && userInfo.vip_gif == 1" @tap="toMembership('/pages/money/memberPaySuccess?type=3&orderId='+ userInfo.gif_order)">赠品尚未领取</button> -->
					<!-- <button class="b-btn" v-if="userInfo.type == 1 && userInfo.vip_gif == 0" @tap="toMembership('/member/myMembership')">立即查看</button> -->
					<!-- <button class="b-btn" v-if="userInfo.type == 2 && userInfo.agent_gif == 1" @tap="toMembership('/pages/money/memberPaySuccess?type=4&orderId='+ userInfo.gif_order)">赠品尚未领取</button> -->
					<!-- <button class="b-btn" v-if="userInfo.type == 2 && userInfo.agent_gif == 0" @tap="toMembership('/member/memberCenter')">立即查看</button> -->
					
					<navigator class="b-btn" v-if="!hasLogin || userInfo.type == 0" url="/member/memberActivation">
						<text>免费领取会员资格</text>
						<text class="yticon icon-you" style="font-size: 23upx;"></text>
					</navigator>
					<navigator class="b-btn" v-if="userInfo.type == 1 && userInfo.vip_gif == 1" url="`/pages/money/memberPaySuccess?type=3&orderId=${userInfo.gif_order}`">赠品尚未领取</navigator>
					<navigator class="b-btn" v-if="userInfo.type == 1 && userInfo.vip_gif == 0" url="/member/myMembership">立即查看</navigator>
					<navigator class="b-btn" v-if="userInfo.type == 2 && userInfo.agent_gif == 1" url="`/pages/money/memberPaySuccess?type=4&orderId=${userInfo.gif_order}`">赠品尚未领取</navigator>
					<navigator class="b-btn" v-if="userInfo.type == 2 && userInfo.agent_gif == 0" url="/member/memberCenter">立即查看</navigator>
					
				</view>
				<view class="card-box-right">
					<image src="/static/img/user/crown.png" style="width: 146upx;height: 114upx;"></image>
					<text>享受八大权益</text>
				</view>
				
			</view>
		</view>

		<view class="cover-container">
			<!-- <image class="arc" src="/static/arc.png"></image> -->
			<!-- 订单 -->
			<view class="order-section">
				<view class="title">
					<view class="title_content">订单中心</view>
					<view class="checkorder" @tap="toOrderList(0)">
						<text>查看全部订单</text>
						<text class="yticon icon-you"></text>
					</view>

				</view>
				<view class="list">
					<view class="box" v-for="(row,index) in orderList" :key="index" @tap="toOrderList(index + 1)">
						<view class="img">
							<!-- <image src="/static/img/user/icon_daifahuo.png" mode="widthFix"></image> -->
							<!-- view class="icon" :class="row.icon"></view> -->
							<image :src="row.img" mode="aspectFit"></image>
						</view>
						<view class="text">{{row.text}}</view>
					</view>
				</view>

			</view>
			<!-- 我的服务 -->
			<view class="service">
				<view class="title">
					<view class="title_content">我的服务</view>
				</view>
				<view class="list">
					<view class="box" v-for="(row,index) in mytoolbarList" :key="index" @tap="toPage(row.url)">
						<view class="img">
							<image :src="row.img" mode="aspectFit"></image>
						</view>
						<view class="text">{{row.text}}</view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>
<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import Api from '@/common/api';
	import listCell from '@/components/mix-list-cell';

	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			listCell
		},
		data() {
			return {
				// coverTransform: 'translateY(0px)',
				// coverTransition: '0s',
				imgsrc: Api.imgsrc,
				imgIcon: Api.imgIcon,
				moving: false,
				logining: false,
				cartListLength: 0,
				// 订单类型
				orderList: [{
						text: '待支付',
						icon: "fukuan",
						img: "/static/img/user/icon_daizhifu.png"
					},
					{
						text: '待发货',
						icon: "fahuo",
						img: "/static/img/user/icon_daifahuo.png"
					},
					{
						text: '待收货',
						icon: "shouhuo",
						img: "/static/img/user/icon_daishouhuo.png"
					},
					{
						text: '待评价',
						icon: "pingjia",
						img: "/static/img/user/icon_daipingjia.png"
					},
					{
						text: '退换货',
						icon: "tuihuo",
						img: "/static/img/user/icon_tuihuanhuo.png"
					}
				],
				// 工具栏列表
				mytoolbarList: [{
						url: '/pages/user/coupon',
						text: '优惠券',
						img: '/static/img/user/icon_youhuiquan.png'
					},
					{
						url: '/pages/user/address',
						text: '物流地址',
						img: '/static/img/user/icon_wuliudizhi.png'
					},
					{
						url: '/pages/user/inviteFriends',
						text: '邀请好友',
						img: '/static/img/user/icon_shezhi.png'
					},
					{
						url: '/pages/user/helpCenter',
						text: '帮助中心',
						img: '/static/img/user/icon_bangzhu.png'
					},
					{
						url: '/pages/user/setting',
						text: '设置',
						img: '/static/img/user/icon_shezhi.png'
					}
				]
			}
		},
		onLoad(options) {
		},
		onShow() {
			this.getCartListLength();
			if (this.hasLogin) {
				this.loadData();
			}
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				uni.navigateTo({
					url: '/pages/user/setting'
				})
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			}
		},
		// #endif
		watch:{
			cartListLength(newVal){
				if(newVal > 0){
					uni.setTabBarBadge({
					  index: 2,
					  text: `${newVal}`
					})
				}else{
					uni.removeTabBarBadge({
						index: 2
					})
				}
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			...mapMutations(['login']),
			async loadData() {
				var params = {}
				this.logining = true;
				let data = await Api.apiCall('post', Api.index.userInfo, params);
				if (data) {
					var userInfo = uni.getStorageSync('userInfo');
					userInfo.id = data.id;
					userInfo.wx_openid = data.wx_openid;//微信公众号openID
					userInfo.mini_openid = data.mini_openid; //微信小程序openID
					userInfo.we_chat_openid = data.we_chat_openid; //微信公众号用户openID
					userInfo.name = data.name;
					userInfo.type = data.type;
					// data.avatar.includes("http") true 字符串是以http开头的！
					// data.avatar.includes("http") false 字符串不是以http开头的！
					userInfo.avatar = data.avatar?(data.avatar.includes('http') ? data.avatar : this.imgIcon + data.avatar ): '/static/img/public/avatar.png';
					userInfo.invite_code = data.invite_code;
					// userInfo.collect = data.collect; //收藏
					userInfo.collect = 0; //收藏未开发，暂时设置为0
					userInfo.is_vip = data.is_vip;
					userInfo.vip_gif = data.vip_gif;
					userInfo.agent_gif = data.agent_gif;
					userInfo.balance = data.balance; //用户余额
					userInfo.fortune = data.fortune; //福分
					userInfo.gif_order = data.gif_order;//用户未领取礼品订单号
					userInfo.province = data.province;//省份
					userInfo.city = data.city;//城市
					this.login(userInfo); //保存登录缓存
				}
			},
			async getCartListLength(){
				let params = {},
					method = 'POST',
					data;
				// 用户未登录状态时
				if (!this.hasLogin) {
					let cartListLength = uni.getStorageSync('cartList').length;
					this.cartListLength = cartListLength > 0 ? cartListLength : 0;
					return
				}
				data = await Api.apiCall(method, Api.order.cartList, params);
				if (data) {
					this.cartListLength = data.cartList.reduce((prev,cur) => prev + cur.skuList.length, 0)
				}
			},

			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			toOrderList(index) {
				var url = '/mall/order/order?state=' + index;
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				if (index == 5) {
					uni.showToast({
						title: '暂未开通',
						icon: "none"
					});
					return false;
				}
				uni.navigateTo({
					url
				})
			},
			avatarError(){
				this.userInfo.avatar = '/static/avatar.png'
			},

			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			// coverTouchstart(e) {
			// 	if (pageAtTop === false) {
			// 		return;
			// 	}
			// 	this.coverTransition = 'transform .1s linear';
			// 	startY = e.touches[0].clientY;
			// },
			// coverTouchmove(e) {
			// 	moveY = e.touches[0].clientY;
			// 	let moveDistance = moveY - startY;
			// 	if (moveDistance < 0) {
			// 		this.moving = false;
			// 		return;
			// 	}
			// 	this.moving = true;
			// 	if (moveDistance >= 80 && moveDistance < 100) {
			// 		moveDistance = 80;
			// 	}

			// 	if (moveDistance > 0 && moveDistance <= 80) {
			// 		this.coverTransform = `translateY(${moveDistance}px)`;
			// 	}
			// },
			// coverTouchend() {
			// 	if (this.moving === false) {
			// 		return;
			// 	}
			// 	this.moving = false;
			// 	this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
			// 	this.coverTransform = 'translateY(0px)';
			// },
			toPage(url) {
				var userInfo = uni.getStorageSync('userInfo');
				if (!url) {
					uni.showToast({
						title: '暂未开通',
						icon: "none"
					});
					return;
				}
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url: url + "?type=" + userInfo.type
				})
			},
			toSetting() {
				var url = '/pages/user/information';
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url: url
				})
			},
			toMembership(url) {
				uni.navigateTo({
					url: url
				})
			},
			toInviteFriends() {
				let url;
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}else{
					url = '/pages/user/inviteFriends'
				}
				uni.navigateTo({
					url: url
				})
			}


		}
	}
</script>
<style lang='scss'>
	page {
		/* background-color: #FAFAFA; */
		background-color: rgba(242,242,242,1);
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.user-section {
		/* height: 630upx; */
		padding: 100upx 30upx 0;
		position: relative;
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
			height: 542upx;
			object-fit: contain;

			/* filter: blur(1px); */
			/* opacity: .7; */
		}
	}

	.user-info-box {
		height: 180upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 2;

		.portrait {
			width: 136upx;
			height: 136upx;
			border: 5upx solid #fff;
			border-radius: 50%;
		}

		.info-box {
			flex: 1;
			height: 136upx;
			margin-left: 30upx;
			display: flex;
			flex-wrap: wrap;

			.c01 {
				width: 100%;
				display: flex;
				justify-content: space-between;
				/* align-items: center; */

				.d01 {
					width: 300upx;
					font-size: 36upx;
					color: #FFFFFF;
				}

				.d02 {
					width: 160upx;
					height: 68upx;
					display: inline-flex;
					justify-content: center;
					align-items: center;
					border-radius: 25px;
					font-size: 28upx;
					color: #FFFFFF;
					border: 2upx solid #FFFFFF;
				}
			}

			.c02 {
				/* width: 160upx; */
				min-width: 160upx;
				padding-right: 20upx;
				height: 48upx;
				margin-top: 15upx;
				border-radius: 15upx;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				font-size: 24upx;
				color: #fff;
				background-color: rgba(0, 0, 0, 0.1);
				.yticon {
					width: 20upx;
					height: 26upx;
					margin: 0 20upx 0 10upx;
					display: flex;
					align-items: center;
					font-size: 28upx;
					color: #fff;
				}

				.text {
					display: flex;
					margin-top: -5upx;
					align-items: center;
				}
			}
		}

	}

	.tj-sction {
		/* @extend %section; */
		width: 100%;
		padding: 0 4%;
		margin-bottom: 16upx;
		height: 120upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;

		.tj-item {
			/* @extend %flex-center; */
			width: 30%;
			height: 100%;
			color: #232323;
			font-size: $font-sm;
		}

		.num {
			width: 100%;
			height: 60upx;
			display: flex;
			font-size: $font-sm + 12upx;
			justify-content: center;
			align-items: flex-end;
			font-weight: 600;
		}

		.text {
			width: 100%;
			height: 50upx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.vip-card-box {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		color: #f7d680;
		/* height: 240upx; */
		margin: 0 10upx;
		background: linear-gradient(to bottom, #232323, #424241);
		border-radius: 16upx;
		overflow: hidden;
		position: relative;
		padding: 40upx;
		box-sizing: border-box;

		/* .card-bg {
			position: absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		} */
		.card-box-left{
			display: flex;
			flex-flow: column wrap;
			justify-content: flex-start;
			.b-btn {
				display: inline-flex;
				justify-content: center;
				align-items: center;
				padding: 0 40upx;
				margin-top: 40upx;
				height: 78upx;
				width: auto;
				line-height: 48upx;
				font-size: 22upx;
				color: #36343c;
				border-radius: 20px;
				/* background: linear-gradient(to right, #f9e6af, #ffd465); */
				background-color: #F9E1A1;
				z-index: 1;
			}
			
			.tit {
				display: inline-flex;
				height: 48upx;
				align-items: center;
				justify-content: flex-start;
				font-size: 34upx;
				color: #F9E1A1;
				/* margin-bottom: 28upx; */
			
				.yticon {
					font-size: 40upx;
					font-weight: 200;
					color: #F9E1A1;
					margin-right: 16upx;
				}
			}
		}
		.card-box-right{
			display: flex;
			flex-flow: column wrap;
			font-size: 24upx;
			color: #F9E1A1;
			text{
				margin-top: 20upx;
			}
		}
	}

	.cover-container {
		/* background: $page-color-base; */
		/* margin-top: -150upx; */
		/* margin-top: -110upx; */
		/* padding: 0 30upx; */
		position: relative;
		padding-bottom: 20upx;

		/* .arc {
			position: absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		} */
	}

	.order-section,
	.service {
		width: 100%;
		margin-top: 30upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
		overflow: hidden;

		.title {
			width: 100%;
			padding: 0 30upx;
			font-size: 30upx;
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: .5upx solid $uni-border-color;
			
			&_content{
				color: #232323;
				font-size: 36upx;
				font-weight: 500;
			}
			.yticon {
				font-size: 24upx;
				color: $font-color-light;
			}

			.checkorder {
				color: #A4A7A5;
				font-size: 24upx;
				justify-content: flex-end;
			}
		}

		.list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			box-sizing: border-box;
			padding:20upx 0 30upx 0;

			.box {
				flex: 0 0 20%;
				/* height: 160upx; */
				margin-top: 10upx;
				display: flex;
				flex-flow: column wrap;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				font-size: 22upx;
				color: #3d3d3d;
				
				.img {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 50upx;
					height: 50upx;
					margin-bottom: 20upx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
